<template>
  <div class="knowledge-graph">
    <!-- 资源管理页面 -->
    <div class="resource-management" v-if="showResourceManagement">
      <!-- 标题部分 -->
      <div class="header-section">
        <h1>资源管理 - {{ currentModule }} 分布式文件系统</h1>
        <div class="action-buttons">
          <button class="add-resource-btn">
            <i class="material-icons">add</i>添加资源
          </button>
        </div>
      </div>

      <!-- 表格部分 -->
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>资源名称</th>
              <th>资源描述</th>
              <th>资源类型</th>
              <th>排序</th>
              <th>创建时间</th>
              <th>更新时间</th>
              <th>创建人</th>
              <th>更新人</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(resource, index) in resources" :key="index" :class="{'even-row': index % 2 === 0}">
              <td class="resource-name">{{ resource.name }}</td>
              <td>{{ resource.description }}</td>
              <td>{{ resource.type }}</td>
              <td>{{ resource.order }}</td>
              <td>{{ resource.createdAt }}</td>
              <td>{{ resource.updatedAt }}</td>
              <td>{{ resource.creator }}</td>
              <td>{{ resource.updater }}</td>
              <td>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 原知识图谱页面 -->
    <div v-else>
      <!-- 标题部分 -->
      <div class="header-section">
        <h1>知识图谱管理</h1>
        <div class="action-buttons">
          <button class="import-btn">
            <i class="material-icons">arrow_upward</i>导入
          </button>
          <button class="download-btn">
            <i class="material-icons">description</i>导入模板下载
          </button>
          <button class="export-btn">
            <i class="material-icons">arrow_downward</i>导出
          </button>
        </div>
      </div>

      <!-- 表格部分 -->
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>所属课程</th>
              <th>所属模块</th>
              <th>二级模块</th>
              <th>知识点描述</th>
              <th>题库数量</th>
              <th>难度等级</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in resources" :key="index">
              <td>{{ item.courseName }}</td>
              <td>{{ item.mainModule }}</td>
              <td>{{ item.subModule }}</td>
              <td>{{ item.description }}</td>
              <td>{{ item.questionCount }} 题</td>
              <td>{{ item.difficulty }}</td>
              <td>
                <button class="question-btn">题库管理</button>
                <button class="resource-btn" @click="handleResourceManagement(item.subModule)">资源管理</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页部分 -->
      <div class="pagination">
        <div class="page-size">
          <span>显示</span>
          <select v-model="pagination.pageSize" @change="handleSizeChange">
            <option v-for="size in pageSizes" :key="size" :value="size">{{ size }}</option>
          </select>
          <span>条/页</span>
        </div>
        <div class="page-nav">
          <button 
            class="prev-btn" 
            :disabled="pagination.page === 1"
            @click="handlePageChange(pagination.page - 1)"
          >上一页</button>
          <button 
            v-for="page in Math.ceil(pagination.total / pagination.pageSize)" 
            :key="page"
            class="page-btn"
            :class="{ active: page === pagination.page }"
            @click="handlePageChange(page)"
          >{{ page }}</button>
          <button 
            class="next-btn"
            :disabled="pagination.page >= Math.ceil(pagination.total / pagination.pageSize)"
            @click="handlePageChange(pagination.page + 1)"
          >下一页</button>
        </div>
        <div class="page-info">
          <span>共 {{ Math.ceil(pagination.total / pagination.pageSize) }} 页</span>
        </div>
        <div class="page-jump">
          <input 
            type="number" 
            v-model="jumpPage" 
            min="1" 
            :max="Math.ceil(pagination.total / pagination.pageSize)"
          >
          <button 
            class="jump-btn"
            @click="handlePageChange(Number(jumpPage))"
          >跳转</button>
        </div>
      </div>
    </div>

    <!-- 资源详情对话框 -->
    <div class="resource-dialog" v-if="showResourceDialog">
      <div class="dialog-overlay" @click="showResourceDialog = false"></div>
      <div class="dialog-content">
        <h3>资源详情</h3>
        <div class="form-group">
          <label>资源名称</label>
          <div class="preview-text">{{currentResource.name}}</div>
        </div>
        <div class="form-group">
          <label>资源描述</label>
          <div class="preview-text">{{currentResource.description}}</div>
        </div>
        <div class="form-group">
          <label>资源类型</label>
          <div class="preview-text">{{currentResource.type}}</div>
        </div>
        <div class="form-group">
          <label>创建人</label>
          <div class="preview-text">{{currentResource.creator}}</div>
        </div>
        <div class="form-group">
          <label>修改人</label>
          <div class="preview-text">{{currentResource.updater}}</div>
        </div>
        <div class="form-group">
          <label>资源文件</label>
          <div class="file-input">
            <span class="file-name">{{currentResource.file}}</span>
            <button class="select-file-btn">选择文件</button>
          </div>
        </div>
        <div class="dialog-actions">
          <button class="confirm-delete-btn">确认修改</button>
          <button class="cancel-btn" @click="showResourceDialog = false">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import knowledgeApi from '@/api/knowledgeApi'

const showResourceDialog = ref(false)
const currentResource = ref({
  name: '',
  description: '',
  type: '课前',
  creator: '',
  updater: '',
  file: ''
})

const handleResourceManagement = (module) => {
  // 这里可以发送请求获取资源详情
  showResourceManagement.value = true
  currentModule.value = module
}

const showResourceManagement = ref(false)
const currentModule = ref('')
const resources = ref([])

// 分页相关数据
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

// 分页大小选项
const pageSizes = ref([10, 20, 50])

// 获取知识点列表
const fetchKnowledgeList = async () => {
  try {
    const params = {
      courseId: 1,
      page: pagination.value.page,
      pageSize: pagination.value.pageSize
    }
    console.log('请求参数：', params)
    const response = await knowledgeApi.getKnowledgeList(params)
    // 修改这里的数据获取方式
    resources.value = response.data.records
    pagination.value.total = response.data.total
  } catch (error) {
    console.error('获取知识点列表失败:', error)
  }
}

// 页码改变
const handlePageChange = (newPage) => {
  pagination.value.page = newPage
  fetchKnowledgeList()
}

// 每页条数改变
const handleSizeChange = (newSize) => {
  pagination.value.pageSize = newSize
  pagination.value.page = 1 // 重置到第一页
  fetchKnowledgeList()
}

// 组件挂载时获取数据
onMounted(() => {
  fetchKnowledgeList()
})

// 跳转页码输入
const jumpPage = ref(1)
</script>

<style scoped>
.knowledge-graph {
  padding: 2rem;
  /* background-color: #1a1a1a; */
  min-height: calc(100vh - 70px);
  color: white;
  display: flex;
  flex-direction: column;
}

.table-container {
  flex: 1;
  background: #252525;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.pagination {
  position: sticky;
  bottom: 0;
  background: #1a1a1a;
  padding: 1rem 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.header-section h1 {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: white;
}

.action-buttons {
  display: flex;
  gap: 1rem;
}

.action-buttons button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 500;
  color: white;
}

.import-btn, .download-btn, .export-btn {
  background: #3b82f6;
}

.table-container {
  background: #252525;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: #333;
  padding: 1rem;
  text-align: left;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 500;
}

td {
  padding: 1rem;
  border-bottom: 1px solid #333;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 400;
}

.question-btn {
  color: #3b82f6;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-right: 0.5rem;
}

.resource-btn {
  color: #10b981;
  background: transparent;
  border: none;
  cursor: pointer;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-size select {
  background: #333;
  color: white;
  border: 1px solid #444;
  padding: 0.25rem;
  border-radius: 4px;
  margin: 0 0.5rem;
}

.page-nav button {
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.page-btn {
  background: #333;
  color: white;
}

.page-btn.active {
  background: #3b82f6;
  color: white;
}

.prev-btn, .next-btn {
  background: #333;
  color: white;
}

.jump-btn {
  background: #333;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

/* 资源管理页面样式 */
.resource-management .header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.resource-management h1 {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: white;
}

.add-resource-btn {
  background: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.resource-name {
  color: #3b82f6;
  cursor: pointer;
}

.edit-btn {
  color: #10b981;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-right: 0.5rem;
}

.delete-btn {
  color: #ef4444;
  background: transparent;
  border: none;
  cursor: pointer;
}

.even-row {
  background-color: #2a2a2a;
}

/* 资源对话框样式 */
.resource-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
}

.dialog-content {
  position: relative;
  background: #252525;
  border-radius: 12px;
  padding: 2rem;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  border: 1px solid rgba(139,92,246,0.3);
}

.dialog-content h3 {
  margin-top: 0;
  color: white;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #ddd;
  font-family: 'Noto Sans SC', sans-serif;
}

.preview-text {
  padding: 0.8rem;
  background: #333;
  border-radius: 8px;
  color: white;
  font-family: 'Noto Sans SC', sans-serif;
}

.file-input {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.file-name {
  flex: 1;
  padding: 0.8rem;
  background: #333;
  border-radius: 8px;
  color: white;
}

.select-file-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.confirm-delete-btn {
  background: #ff4757;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
}

.cancel-btn {
  background: #444;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
}
</style>